<div class="content-section introduction">
    <div>
        <span class="feature-title">故障管理</span>
    </div>
</div>
<div class="content-section GridDemo" id="MalfunctionBase" >
    <div class="col-sm-12 ui-fluid-no-padding" >
        <div class="col-sm-1" *ngIf="flowChartDatas && flowChartDatas.length">
            <svg  xmlns="http://www.w3.org/2000/svg" height="61em" viewbox="0 0 300 1200"  preserveAspectRatio="xMinYMin meet" >
                <g transform="translate(-40,0)">
                    <g transform="translate(0,0)"  [routerLink]="['./malfunctionAdd']" class="pointer_curser">
                        <rect x="50" y="10" width="100" height="50" rx="10" ry="10" stroke-width="0.5" stroke="black"  [attr.fill]="flowChartDatas[0].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[0].name}}</text>
                        <!--<rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="0.5" stroke="black" fill="red"></rect>-->
                        <!--<text x="135" y="23" font-size="12" fill="black" text-anchor="middle">{{flowChartDatas[0].record}}</text>-->
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,60)" fill="#666"></polygon>
                    <g transform="translate(0,100)" [routerLink]="['./malfunctionDistribute']" class="pointer_curser">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black" [attr.fill]="flowChartDatas[1].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[1].name}}</text>
                        <rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="0.5" stroke="black" fill="#E4E4E4"></rect>
                        <text x="135" y="23" font-size="12" fill="black" text-anchor="middle">{{flowChartDatas[1].record}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,160)" fill="#666"></polygon>
                    <g transform="translate(0,200)" [routerLink]="['./malfunctionReceive']" class="pointer_curser">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black" [attr.fill]="flowChartDatas[2].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[2].name}}</text>
                        <rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="0.5" stroke="black" fill="#E4E4E4"></rect>
                        <text x="135" y="23" font-size="12" fill="black" text-anchor="middle">{{flowChartDatas[2].record}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,260)" fill="#666"></polygon>
                    <g transform="translate(0,300)" [routerLink]="['./malfuntionDeal']" class="pointer_curser">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black" [attr.fill]="flowChartDatas[3].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[3].name}}</text>
                        <rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="0.5" stroke="black" fill="#E4E4E4"></rect>
                        <text x="135" y="23" font-size="12" fill="black" text-anchor="middle">{{flowChartDatas[3].record}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,360)" fill="#666"></polygon>
                    <g transform="translate(0,400)">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black" stroke-dasharray="5,5" [attr.fill]="flowChartDatas[4].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[4].name}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,460)" fill="#666"></polygon>
                    <g transform="translate(0,500)" [routerLink]="['./malfunctionSolve']" class="pointer_curser">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black" [attr.fill]="flowChartDatas[5].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[5].name}}</text>
                        <rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="0.5" stroke="black" fill="#E4E4E4"></rect>
                        <text x="135" y="23" font-size="12" fill="black" text-anchor="middle">{{flowChartDatas[5].record}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,560)" fill="#666"></polygon>
                    <g transform="translate(0,600)" [routerLink]="['./malfunctionOff']" class="pointer_curser">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black" [attr.fill]="flowChartDatas[6].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[6].name}}</text>
                        <rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="0.5" stroke="black" fill="#E4E4E4"></rect>
                        <text x="135" y="23" font-size="12" fill="black" text-anchor="middle">{{flowChartDatas[6].record}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,660)" fill="#666"></polygon>
                    <g transform="translate(0,700)">
                        <rect x="50" y="10" width="100" height="50" rx="10" ry="10" stroke-width="0.5" stroke="black" fill="none"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">关闭</text>
                        <!--<rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="0.5" stroke="black" fill="red"></rect>-->
                        <!--<text x="135" y="23" font-size="12" fill="black" text-anchor="middle">关闭</text>-->
                    </g>
                </g>
            </svg>
        </div>
        <div class="col-sm-11" >
            <router-outlet></router-outlet>
        </div>
    </div>
</div>
